import React, { useCallback, useEffect } from "react";
import { useTranslation } from "react-i18next";
import ImageAtom from "../../UI_KIT/Atoms/Image.Atom";
import ImageEnum from "../../UI_KIT/Atoms/Image.Atom/enum";
import Image from "next/image";
import CloseIcon from "../../shared/icons/close.svg?react";
import { CartBlockProps } from "./type";
import MinusIcon from "../../shared/icons/minus.svg?react";
import PlusIcon from "../../shared/icons/plus.svg?react";
import useCartStore from "@/business.InterfaceLayer/hooks/store/localstorage/useCartStore";
import CheckBox from "../../UI_KIT/Atoms/CheckBox.Atom";
import { CheckboxAtomEnum } from "../../UI_KIT/Atoms/CheckBox.Atom/enum";
import ButtonAtom from "../../UI_KIT/Atoms/Button.Atom";
import ButtonAtomEnum from "../../UI_KIT/Atoms/Button.Atom/enum";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import Link from "next/link";

const CartBlock: React.FC<CartBlockProps> = (props) => {
  const { t } = useTranslation();
  const {
    size,
    title,
    color,
    count,
    sum,
    availability,
    price,
    img_paths,
    id,
    isSelected,
  } = props;

  const { removeItem, increaseQuantity, decreaseQuantity, selectedItem } =
    useCartStore();

  const handleOnchange = useCallback(() => {
    id && selectedItem(id);
  }, [id, selectedItem]);

  const handleIncreaseQuantity = useCallback(() => {
    id && increaseQuantity(id);
    id && selectedItem(id); // Обновляем состояние выбора элемента
  }, [id, increaseQuantity, selectedItem]);

  const handleDecreaseQuantity = useCallback(() => {
    if (count && count > 1) {
      id && decreaseQuantity(id);
      id && selectedItem(id); // Обновляем состояние выбора элемента
    }
  }, [count, decreaseQuantity, id, selectedItem]);

  useEffect(() => {
    // Обновляем состояние выбора элемента после изменения количества
    id && selectedItem(id);
  }, [id, count, selectedItem]);

  return (
    <div className="flex justify-between items-start py-[30px] px-[35px] bg-bgGen border border-borderColor rounded-lg ">
      <div className="flex items-start gap-[20px]">
        <CheckBox
          type={CheckboxAtomEnum.CHECKBOX}
          checked={isSelected}
          className="my-auto"
          onChange={handleOnchange}
        />

        <div className="flex items-start gap-[50px]">
          <div className="flex w-[340px] items-start gap-[15px]">
            <Link href={`/product/${id}`} target="_blank">
              <div className="flex w-[140px] h-[190px] flex-col justify-center items-center">
                <Image
                  src={`/img/${img_paths}.png`}
                  alt={t("CartPage.cartBlock.textImage")}
                  width={140}
                  height={190}
                  className="w-full h-full rounded-lg"
                />
              </div>
            </Link>

            <div className="flex flex-col items-start gap-5 text-textColor">
              <TextAtom type={TextAtomEnum.enum_h4} className="font-bold">
                {title}
              </TextAtom>
              <div className="flex items-center gap-x-1">
                <TextAtom type={TextAtomEnum.enum_h4} className="font-bold">
                  {t("CartPage.cartBlock.textSize")}:
                </TextAtom>
                <TextAtom type={TextAtomEnum.enum_h4} className="font-medium">
                  {size}
                </TextAtom>
              </div>
              <div className="flex items-center gap-x-1">
                <TextAtom type={TextAtomEnum.enum_h4} className="font-bold">
                  {t("CartPage.cartBlock.textColor")}:
                </TextAtom>
                <TextAtom type={TextAtomEnum.enum_h4} className="font-medium">
                  {color}
                </TextAtom>
              </div>
            </div>
          </div>

          <div className="flex flex-col items-start text-textColor">
            <TextAtom type={TextAtomEnum.enum_h3} className="font-semibold">
              {price?.toLocaleString()} ₽
            </TextAtom>
            <TextAtom type={TextAtomEnum.enum_h4} className="font-regular">
              {t("CartPage.cartBlock.textPrice")}
            </TextAtom>
          </div>

          <div className="flex items-center gap-[25px]">
            <TextAtom type={TextAtomEnum.enum_h5} className="font-light">
              {t("CartPage.cartBlock.textAvailability")} : {availability}
            </TextAtom>
            <div className="flex justify-end items-center gap-[5px]">
              <ButtonAtom
                type={ButtonAtomEnum.enum_defaultButton}
                className={`p-2 bg-borderColor rounded-full group${
                  count === 1
                    ? "opacity-20 cursor-not-allowed"
                    : "cursor-pointer"
                }`}
              >
                <ImageAtom
                  type={ImageEnum.enum_defaultSvg}
                  onClick={handleDecreaseQuantity}
                  icon={<MinusIcon />}
                  className=" fill-gray w-[14px] h-[14px] group-hover:fill-peach"
                />
              </ButtonAtom>
              <TextAtom type={TextAtomEnum.enum_h5} className="text-medium">
                {count}
              </TextAtom>
              <ButtonAtom
                type={ButtonAtomEnum.enum_defaultButton}
                className="p-2 bg-borderColor rounded-full group"
              >
                <ImageAtom
                  type={ImageEnum.enum_defaultSvg}
                  onClick={handleIncreaseQuantity}
                  icon={<PlusIcon />}
                  className=" fill-gray w-[14px] h-[14px] group-hover:fill-peach"
                />
              </ButtonAtom>
            </div>
          </div>
        </div>
      </div>

      <div className="flex items-center gap-[60px]">
        <TextAtom
          type={TextAtomEnum.enum_h3}
          className="text-textColor font-semibold"
        >
          {sum?.toLocaleString()}
        </TextAtom>
        <ImageAtom
          type={ImageEnum.enum_defaultSvg}
          icon={<CloseIcon />}
          onClick={() => id && removeItem(id)}
          className="fill-borderColor w-6 h-6 cursor-pointer hover:fill-peach"
        />
      </div>
    </div>
  );
};

export default React.memo(CartBlock);
